• File: hub_webtrn_maintain.php
  • Full Path: C:/htdocs/REEFTintegrationLog_test/REEFTintegrationLog/saved/hub_webtrn_maintain.php
  • Date Modified: 04/30/2025 7:56 AM
  • File size: 60.09 KB
  • MIME-type: text/x-php
  • Charset: utf-8
<?php
//======================================================================================
//
// Function: Maintain  HUB_WEBTRN
//
// Programmer: JKJ
// Date      : 2024-08-15
//
// Copyright Reeft A/S (c) - 2024
//======================================================================================

// https://stackoverflow.com/questions/56062658/clicking-programmatically-on-the-arrows-of-html-inputs-type-number
// https://datatables.net/manual/server-side
// https://datatables.net/examples/data_sources/server_side

//======================================================================================
// Get input
//======================================================================================

	if (isset($_REQUEST["webnam"])) {
		$hub_webnam = $_REQUEST["webnam"];
	} else {
		$hub_webnam = '';
	}

//======================================================================================
// Make line uppercase
//======================================================================================


//======================================================================================
// General config
//======================================================================================
	include "config/config.php";

//======================================================================================
// Check if user is logged in?
//======================================================================================
	include "login_check.php";

//======================================================================================
// Get session variables
//======================================================================================

	include "include/getsession.php";


	// include "include/uuid_create.php";
	// include "include/generate_password_md5.php";

//======================================================================================
// Set language
//======================================================================================

	include "include/set_language.php";

//======================================================================================
// Set defaults
//======================================================================================

	// $pk_reference  = $_SESSION['session_dft_pk_reference'];
	// $referenceCode = $_SESSION['session_dft_referencecode'];
	// $referenceName = $_SESSION['session_dft_referencename'];

//======================================================================================
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<title><?php echo $datahub_text0001 ?></title>

	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="REEFTvisual - Stoptime">
    <meta name="author" content="REEFT A/S">
    <link rel="icon" href="images/favicon/favicon.ico">

    <!-- Bootstrap / jQuery -->
    <link href="css/bootstrap4.3.1/css/bootstrap.custom.min.css" rel="stylesheet">
    <link href="css/bootstrap4.3.1/css/themes/bootstrap.custom.min.css" rel="stylesheet">

	<link href="css/bootstrap4.3.1/css/normalize.css" rel="stylesheet" type="text/css">

	<link href="css/sticky-footer.css" rel="stylesheet" type="text/css">

    <!-- Custom styles for this template -->
    <link href="css/custom.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">


	<script src="css/fontawesome6.5.1/js/all.min.js"></script>
	<script src="css/fontawesome6.5.1/js/sharp-light.min.js"></script>
	<script src="css/fontawesome6.5.1/js/sharp-regular.min.js"></script>
	<script src="css/fontawesome6.5.1/js/sharp-solid.min.js"></script>
	<script src="css/fontawesome6.5.1/js/sharp-thin.min.js"></script>


	<link href="css/bootstrap_animation/css/animate4/animate.css" rel="stylesheet" type="text/css">

	<!--<link href="javascript/chosen/chosen.css" rel="stylesheet" type="text/css">-->

	<link href="javascript/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>

    <script src="javascript/jquery.js"></script>
    <script src="css/bootstrap4.3.1/js/popper.js"></script>
    <script src="css/bootstrap4.3.1/js/bootstrap.min.js"></script>

	<script src="javascript/jquery-ui/jquery-ui.min.js"></script>
    <script src="javascript/jquery.ui.touch-punch.min.js"></script>

	<link href="javascript/bgrins-spectrum/spectrum.css" rel="stylesheet" type="text/css">
	<script src="javascript/bgrins-spectrum/spectrum.js"></script>

	<script src="javascript/moment.min.js"></script>
	<script src="javascript/moment-with-locales.min.js"></script>
	<script src="javascript/moment-duration-format.min.js"></script>

	<script src="javascript/number_format/jquery.number.min.js"></script>

	<script src="javascript/jquery.scrollTo.min.js"></script>


	<link href="javascript/daatatables/media/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
	<link href="javascript/daatatables/media/css/fixedHeader.dataTables.min.css" rel="stylesheet" type="text/css">
	<link href="javascript/daatatables/Buttons-1.4.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">

    <script src="javascript/daatatables/media/js/jquery.dataTables.min.js"></script>
    <script src="javascript/daatatables/media/js/dataTables.fixedHeader.min.js"></script>
	<script src="javascript/daatatables/Buttons-1.4.2/js/dataTables.buttons.min.js"></script>
	<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.flash.min.js"></script>
	<script src="javascript/daatatables/JSZip-2.5.0/jszip.min.js"></script>
	<script src="javascript/daatatables/pdfmake-0.1.53/pdfmake.min.js"></script>
	<script src="javascript/daatatables/pdfmake-0.1.53/vfs_fonts.js"></script>
	<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.html5.min.js"></script>
	<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.print.min.js"></script>

	<script src="javascript/chosen/chosen.jquery.min.js" type="text/javascript"></script>

	<script src="javascript/viewer-master/dist/viewer.min.js"></script>
	<link  href="javascript/viewer-master/dist/viewer.min.css" rel="stylesheet">

	<script src="javascript/ajaxq/ajaxq.js"></script>

	<link id="scrollUpTheme" rel="stylesheet" href="javascript/scrollup-master/dist/css/themes/image.css">
	<script src="javascript/scrollup-master/dist/jquery.scrollUp.js"></script>
	<script src="javascript/shortcut.js"></script>

	<script src="javascript/_reeft_js/set_font_awesome_icon_type.js"></script>
	<script src="javascript/_reeft_js/date_convert.js"></script>
<style>

.btn-custom-wide {
	height:60px;
	width:210px;
}

.text-truncate-dt {
    max-width: 350px;
	white-space: nowrap;
    overflow: hidden;
	text-overflow: ellipsis;

}
.modal-xxl {
    max-width: 80%;
}

.modal-xl {
    max-width: 50%;
}

.text-align-center-dt {
    text-align: center;
}

.border-3 {
    border-width:3px !important;
}

td .hover-img {
  position:relative;
 }
td .hover-img span {
  position:absolute; left:-9999px; top:-9999px; z-index:9999;
 }
td:hover .hover-img span {
  top: 5px;
  left:0px;
 }

 .chosen-container-single {
    min-width: 100%;
}

</style>

<script language="JavaScript">

//=============================================================================
// Globals
//=============================================================================

    var thisCurrentRow;
	var thisGlobalRowData;
    var thisGlobalTableData;

	// date variables
	var input_fromdate;
	var input_fromtime;
	var input_todate;
	var input_totime;

	var GLOBAL_HUB_NAM = '<?php echo $hub_webnam ?>'

	var global_debug = 'N';

	// Add allowed Y/N
	var GLOBAL_ADD_ALLOWED = 'N';

	// Show group buttons
	var GLOBAL_SHOW_GROUP_BUTTONS = 'N';

	// Delete allowed Y/N
	var GLOBAL_DELETE_ALLOWED = 'N';

	// sortMode
	var GLOBAL_SORTMODE = 'DESC';

	var jsonDataSave = {};

	var DFT_DATE_DISPLAY_FORMAT 	=  '<?php //echo $DFT_DATE_DISPLAY_FORMAT ?>';
	var DFT_LANGUAGE 				=  '<?php //echo $DFT_LANGUAGE ?>';

	var GLOBAL_TOTALPAGESSTOPVALUE	=  10;

	// Save field
	//var save_CFGNAM = '';


	$(function () {
	  $.scrollUp({
		scrollName: 'scrollUp', // Element ID
		//topDistance: '1800', // Distance from top before showing element (px)
		//topSpeed: 300, // Speed back to top (ms)
		scrollDistance: '300', // Distance from top before showing element (px)
		scrollSpeed: 300, // Speed back to top (ms)
		animation: 'fade', // Fade, slide, none
		animationInSpeed: 200, // Animation in speed (ms)
		animationOutSpeed: 200, // Animation out speed (ms)
		scrollText: false, //'Scroll to top', // Text for element
		activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
	  });
	});

//=============================================================================
// Get data
//=============================================================================
function getData( inputGetData )
{

	// Reset, show all
	if ( inputGetData == '*RESET' ) {
		inputGetData = '';
		$('#input-fromdate').val('');
		$('#input-fromtime').val('');
		$('#input-todate').val('');
		$('#input-totime').val('');

		// Update input variables
		input_fromdate = $('#input-fromdate').val();
		input_fromtime = $('#input-fromtime').val();
		input_todate = $('#input-todate').val();
		input_totime = $('#input-totime').val();

		//Clear search
		thisGlobalTableData.search( '' );

	}

	//Only initialize datatables once, else just draw it
	if ( $.fn.dataTable.isDataTable( '#REEFTvisual_data' ) ) {
		thisGlobalTableData.draw(); // fire in the hole
	}
	else {
		setDataTables();
	}

}

//=============================================================================
// Set datatables
//=============================================================================
function setDataTables()
{


	// Delete allowed?
	GLOBAL_DELETE_ALLOWED = 'N';

	if ( GLOBAL_DELETE_ALLOWED == 'Y' ) {
		var show_the_delete_button = true;
	} else {
		var show_the_delete_button = false;
	}

	// Get the current date line
	input_hub_webnam 	= $('#input-webnam').val();
	input_fromdate 		= $('#input-fromdate').val();
	input_fromtime 		= $('#input-fromtime').val();
	input_todate 		= $('#input-todate').val();
	input_totime 		= $('#input-totime').val();

    $('#REEFTvisual_data').DataTable({
		"ajax": {
			"url": 'hub_webtrn_maintain_get.php',
			"type": "POST",
			"data": function (parmData) {

				// Add custom parameters to the ajax call

				// Webservice name
				parmData.hub_webnam	 = input_hub_webnam;

				// From date
				parmData.fromdate = input_fromdate.trim();
				parmData.fromtime = input_fromtime;

				// To date
				parmData.todate = input_todate.trim();
				parmData.totime = input_totime;

			},
			dataSrc: function (jsonData) {  //return data

				var rpyCMPNO			= jsonData.header.rpyCMPNO;
				var rpyCMPNO_Name		= jsonData.header.rpyCMPNO_Name;
				var rpyFile_name		= jsonData.header.rpyFile_name
				var rpyFile_description	= jsonData.header.rpyFile_description
				var rpyTableRecordsFound= jsonData.header.rpyTableRecordsFound

				var returnCode 			= jsonData.header.returnCode;
				var returnMsg 			= jsonData.header.returnMsg;
				var entries_found 		= jsonData.header.entries_found;
				var response_sec 		= jsonData.header.response_sec;

				// Show load time
				$('#text-total-records-found').html( rpyTableRecordsFound );
				$('#load-time-from-database').html('entries found: ' + entries_found + ' (' + response_sec + ')');

				// Set Company and file information
				if ( rpyCMPNO != '' ) {
					$('#data-hub-company-information').html( '<span title="' + rpyFile_name + ' - ' + rpyFile_description + '">' + rpyCMPNO_Name + ' (' + rpyCMPNO + ')' + '</span>' ).css('font-size','1.3em');
				}

				// Init button line fields
				var HTMLlineButtons 		= '';
				var HTMLlineButtonsModal 	= '';
				var selectedButtonClass 	= 'btn-dark';

				// Get name of search item
				input_WEBNAM  = $('#input-webnam').val();

				// Just in case
				if (input_WEBNAM == '' ) {
					input_WEBNAM = '<?php echo $hub_webnam ?>';
				}

				//=====================================================================================
				// Create group buttons, only if wanted
				//=====================================================================================
				if ( GLOBAL_SHOW_GROUP_BUTTONS == 'Y' ) {

					$.each( jsonData.header_buttons, function( index, object ){
						var buttonLine   = object.HUB_WEBNAM;
						var HUB_SERTYP	 = object.HUB_SERTYP;
						var buttonCount  = object.HUB_COUNT;
						var buttonPages  = object.buttonPages;

						if ( input_WEBNAM == buttonLine ) {
							selectedButtonClass = 'btn-success';
						} else {
							selectedButtonClass = 'btn-dark';
						}

						var selectButtonLineID 		= 'select-button-line-id-' + buttonLine;
						var selectButtonLineIDmodal = 'select-button-line-id-modal-' + buttonLine + '_' + HUB_SERTYP;

						HTMLlineButtons 		+=	'<button type="button" onclick="setWebserviceSearch(\'' + buttonLine + '\')" style="cursor:default" id="' + selectButtonLineID + '" class="btn ' + selectedButtonClass + ' select-button-line btn-sm mr-1 mb-1" onclick="firstPage(\'' + buttonLine + '\',\'' + '0' + '\',\'' + '' + '\',\'' + buttonPages + '\')">'
												+ 	buttonLine + ' (<b>' + buttonCount + '</b>)' + ' / ' + HUB_SERTYP
												+	'</button>'

						HTMLlineButtonsModal 	+=	'<button type="button" style="width:45px" id="' + selectButtonLineIDmodal + '" class="select-button-line-modal btn btn-primary btn-sm mr-1 mb-1" onclick="selectLineModal(\'' + buttonLine + '\')">'
												+ 	buttonLine + ' ' + HUB_SERTYP
												+	'</button>'

					});



					$('#data-result-button-lines').html(HTMLlineButtons);
					$('#data-result-button-lines-modal').html(HTMLlineButtonsModal);

				}
				//=====================================================================================


				return jsonData.data;
			}
		},
		"processing": true,
		"serverSide": true,
        "responsive": true,
		"fixedHeader": true,
		"lengthMenu": [[10, 25, 50, 100, 250], [10, 25, 50, 100, 250]],
		"iDisplayLength": 25,
		"dom": 'lfip<bottom>Bp<"clear">',
        "order": [[ 0, "asc" ],[ 1, "desc" ]],
		"columns":
				[
                    { data: "HUB_WEBNAM" }, // 1
                    { data: "HUB_TIMSTP" }, // 2
                    { data: "HUB_PACKNO" }, // 3
					{
						// Since we are combining multiple data fields, use null as the data source
						// 4
						data: 'HUB_PRODID',
						render: function (data, type, row, meta)
						{

							var PRODID = row.HUB_PRODID

							if ( PRODID != '' ) {
								PRODID_pretty = formatPRODID(PRODID);
							} else {
								PRODID_pretty = '-';
							}

							return PRODID_pretty;

						}
					},

					{ data: "HUB_SECOND" }, // 5
                    { data: "HUB_INPTXT" }, // 6
					{
						// Since we are combining multiple data fields, use null as the data source
						// 7
						data: null,
						render: function (data, type, row, meta)
						{
							// Create edit button
							var myButton = '<button id="edt-' + row.HUB_WEBNAM + '-' + row.HUB_TIMSTP + '" class="edit-btn btn btn-primary mr-1"><?php echo $datahub_button_show_details ?></button>';
							return myButton;
						}
					},
					{
						// Since we are combining multiple data fields, use null as the data source
						// 8
						data: null,
			            // data: "HUB_TIMSTP",
						render: function (data, type, row, meta)
						{
							// Create delete button
							var myButton = '<button id="dlt-' + row.HUB_WEBNAM + '-' + row.HUB_TIMSTP + '" class="delete-btn btn btn-danger mr-1"><?php echo $datahub_button_delete ?></button>';
							return myButton;
						}
					},
					{ data: "HUB_IFSFIL" }, // 9
                    { data: "HUB_STRCAL" }, // 10
                    { data: "HUB_ENDCAL" }, // 11
					{ data: "HUB_MSECND" }, // 12
					{ data: "HUB_RPYCOD" }, // 13
					{ data: "HUB_RPYTXT" }	// 14


                ],
		"columnDefs": [
				{
				"targets": [ 2 ],
				"visible": true,
				"searchable": true,
				"orderable": true
				},
				{
				"targets": [ 7 ],
				"visible": show_the_delete_button,
				"searchable": false,
				 "orderable": false
				},
				{
				"targets": [ 5,6 ],
				"className": "text-truncate-dt"  //class to mimic text-truncate in dt
				},
				{
				"targets": [ 8,9,10,11,12,13 ],
				"visible": false,
				"searchable": false,
				"orderable": false
				},
				{
				"targets": [ 2,4 ],
				"className": "text-align-center-dt"
				}
								
		],
		"language":
		{
					"processing": 	 "<i class=\"fa fa-spinner fa-spin fa-3x fa-fw\"></i><span class=\"sr-only\"><?php echo $datahub_datatable_Processing ?></span>",
					"sProcessing":   "<?php echo $datahub_datatable_Processing ?>",
					"sLengthMenu":   "<?php echo $datahub_datatable_LengthMenu ?>",
					"sZeroRecords":  "<?php echo $datahub_datatable_ZeroRecords ?>",
					"sInfo":         "<?php echo $datahub_datatable_Info ?>",
					"sInfoEmpty":    "<?php echo $datahub_datatable_InfoEmpty ?>",
					"sInfoFiltered": "<?php echo $datahub_datatable_InfoFiltered ?>",
					"sInfoPostFix":  "<?php echo $datahub_datatable_InfoPostFix ?>",
					"sLoadingRecords": "<?php echo $datahub_datatable_Processing ?>",
					"sSearch":       "<?php echo $datahub_datatable_Search ?>",
					"sUrl":          "<?php echo $datahub_datatable_Url ?>",
					"oPaginate": {
						"sFirst":    "<?php echo $datahub_datatable_First ?>",
						"sPrevious": "<?php echo $datahub_datatable_Previous ?>",
						"sNext":     "<?php echo $datahub_datatable_Next ?>",
						"sLast":     "<?php echo $datahub_datatable_Last ?>"
					}
		},
        "rowCallback": function(row, data, index)
		{



		},
        "preDrawCallback": function(settings)
		{
		},
		"initComplete": function ()
		{

		},
		"buttons": 	[
					{
						extend: 'pdf',
						text: '<img src="images/pdf_logo.png" height="25"> PDF',
						orientation: 'landscape',
						title: 'Config - Data Export - PDF',
						exportOptions: {
							// Fields to export (https://datatables.net/reference/button/csv#Examples)
						columns: [0,1,2,3,4,7,8,9,10,11,12],
						modifier: {
							page: 'all'
							}
						}
					},
					{
						extend: 'excel',
						text: '<img src="images/microsoft_excel_logo.png" height="25"> Excel',
						title: function(){
							var p_id = $('#input-webnam').val();
							return 'DATAHUB transactions file export - ' + p_id;
						},
						filename: function(){
							var p_id = $('#input-webnam').val();
							return 'DATAHUB transactions file export - ' + p_id;
						},
						exportOptions: {
							// Fields to export (https://datatables.net/reference/button/csv#Examples)
							columns: [0,1,2,3,4,7,8,9,10,11,12]
						}
					},
					{
						extend: 'copy',
						text: '<img src="images/copy.png" height="25"> Copy to Clipboard',
						title: 'Config Data Export - Copy',
						exportOptions: {
							// Fields to export (https://datatables.net/reference/button/csv#Examples)
							columns: [0,1,2,3,4,7,8,9,10,11,12]
						}
					}
					]

    });


	//=============================================================================
	// Setup the data to be able to update the table without reloading from the server
	//=============================================================================

		// Save the table in a global variable
		thisGlobalTableData = $('#REEFTvisual_data').DataTable();

		// Handle click on "Edit" button
		$('#REEFTvisual_data tbody').on('click', '.edit-btn', function() {
			thisCurrentRow 	= $(this).closest('tr');
			thisGlobalRowData = thisGlobalTableData.row(thisCurrentRow).data();

			// Debug
			// console.log("edit");
			// console.log(thisGlobalRowData);
			console.log(thisCurrentRow);

			 dataChange();

		});

		// Handle click on "Delete" button
		$('#REEFTvisual_data tbody').on('click', '.delete-btn', function() {
			thisCurrentRow 	= $(this).closest('tr');
			thisGlobalRowData = thisGlobalTableData.row(thisCurrentRow).data();

			// Debug
			// console.log(thisGlobalRowData);
			// console.log(thisCurrentRow);

			dataDeleteConfirm();

		});

	//=============================================================================


}

//=============================================================================
// Reason addd  -- not used
//=============================================================================
function dataAdd ( input_pk_type )
{

			$('#input-mode').val('*add');


			// $('#modal-input-ACTIVE').val('Y');		// Active
			// $('#modal-input-CFGNAM').val('');		// DATA-HUB cfg name
			// $('#modal-input-CFGTYP').val('');		// DATA-HUB cfg type
			// $('#modal-input-CFGDSC').val('');		// Config description
			// $('#modal-input-CFGVAL').val('');		// DATA-HUB cfg value
			// $('#modal-input-CFGDAT').val('');		// Create date
			// $('#modal-input-CFGTIM').val('');		// Create time

			// Reset save field(s)
			//save_CFGNAM = '';

			// Set active - default YES
			$('#button-deleted-yes').removeClass('btn-primary').addClass('btn-success');
			$('#button-deleted-no').removeClass('btn-success').addClass('btn-primary');

			// Reset modal message
			resetModalMessage();

			// Remove key fields readonly
			$('#modal-input-WEBNAM').removeAttr('readonly','readonly');
			$('#data-result-button-lines-modal').removeClass('d-none');

			// Show modal
			$('#webtrn_MaintainModal').modal('show');

			$('#webtrn_MaintainModal').on('shown.bs.modal', function () {
				//$('#modal-input-WZLIN').trigger('focus');
			})

}

//=============================================================================
// Show details
//=============================================================================
function dataChange( )
{


	$('#input-mode').val('*update');

	var row = thisGlobalRowData;

	// Save in fields
	var HUB_WEBNAM  = row["HUB_WEBNAM"];
	var HUB_TIMSTP  = row["HUB_TIMSTP"];
	var HUB_PACKNO	= row["HUB_PACKNO"];
	var HUB_PRODID	= row["HUB_PRODID"];
	var HUB_INPTXT  = row["HUB_INPTXT"];
	var HUB_STRCAL  = row["HUB_STRCAL"];
	var HUB_ENDCAL  = row["HUB_ENDCAL"];
	var HUB_SECOND  = row["HUB_SECOND"];
	var HUB_MSECND  = row["HUB_MSECND"];
	var HUB_RPYCOD  = row["HUB_RPYCOD"];
	var HUB_RPYTXT  = row["HUB_RPYTXT"];
	var HUB_IFSFIL  = row["HUB_IFSFIL"];
	var counter     = row["counter"];

	// Move to input fields
	$('#modal-input-counter').val(counter);
	$('#modal-input-WEBNAM').val(HUB_WEBNAM);
	$('#modal-input-TIMSTP').val(HUB_TIMSTP);
	$('#modal-input-PACKNO').val(HUB_PACKNO);
	$('#modal-input-PRODID').val(HUB_PRODID);
	$('#modal-input-INPTXT').val(HUB_INPTXT);
	$('#modal-input-STRCAL').val(HUB_STRCAL);
	$('#modal-input-ENDCAL').val(HUB_ENDCAL);
	$('#modal-input-SECOND').val(HUB_SECOND);
	$('#modal-input-MSECND').val(HUB_MSECND);
	$('#modal-input-RPYCOD').val(HUB_RPYCOD);
	$('#modal-input-RPYTXT').val(HUB_RPYTXT);
	$('#modal-input-IFSFIL').val(HUB_IFSFIL);

	// Make key fields readonly
	$('#data-result-button-lines-modal').addClass('d-none');

	$('.read-only-class').attr('readonly','readonly');

	// Reset modal message
	resetModalMessage();

	// Show modal
	$('#webtrn_MaintainModal').modal('show');

	$('#webtrn_MaintainModal').on('shown.bs.modal', function () {

	})

}


//=============================================================================
// Save
//=============================================================================
function dataSave()
{
	// Reset modal message
	resetModalMessage();


	// Check content of fields
	if ( $('#modal-input-WEBNAM').val() == '' ) {
		$('#modal-message').addClass('border-bottom').html( '<?php echo $datahub_error0082 ?>' );
		$('#modal-save-button').addClass('disabled').prop("disabled", true);
		return false;
	}

	// if ( $('#modal-input-LSTCAL').val() == '' ) {
		// $('#modal-message').addClass('border-bottom').html( '<?php echo $datahub_error0083 ?>' );
		// $('#modal-save-button').addClass('disabled').prop("disabled", true);
		// return false;
	// }

	// if ( $('#modal-input-DESCP1').val() == '' ) {
		// $('#modal-message').addClass(' border-bottom').html( '<?php echo $datahub_error0084 ?>' );
		// $('#modal-save-button').addClass('disabled').prop("disabled", true);
		// $('#modal-input-DESCP1').focus();
		// return false;
	// }

	// if ( $('#modal-input-DESCP2').val() == '' ) {
		// $('#modal-message').addClass(' border-bottom').html( '<?php echo $datahub_error0085 ?>' );
		// $('#modal-save-button').addClass('disabled').prop("disabled", true);
		// $('#modal-input-DESCP1').focus();
		// return false;
	// }


	var mode = $('#input-mode').val();

	//===============================================================================
	// Remove # if any
	//===============================================================================

		// Setup remove string
		let mySaveString;

		// var myWorkField = $('#modal-input-DESCP1').val();
		// myWorkField = myWorkField.replace("#", "");
		// $('#modal-input-DESCP1').val( myWorkField );

		// var myWorkField = $('#modal-input-DESCP2').val();
		// myWorkField = myWorkField.replace("#", "");
		// $('#modal-input-DESCP2').val( myWorkField );


	//===============================================================================

	// Make sure key does not have space and are in uppercase
	// var myWorkField = $('#modal-input-WEBNAM').val();
	// myWorkField = myWorkField.replace(" ", "_");
	// myWorkField = myWorkField.toUpperCase();
	// $('#modal-input-WEBNAM').val( myWorkField );

	// Make array and json
	var myData = $('#dataForm').find('input, select, textarea').serializeArray();

	var result = JSON.stringify(myData);

	var result = encodeURIComponent( result );
	// console.log(result);
	// console.log(myData);
	// return;

	var parmData = 'data=' + result
				 + '&mode=' + mode
				 ;

	$.ajax({
		url: "HUB_WEBTRN_maintain_save.php",
		type: "POST",
		data: parmData,
		dataType: "json",
		cache: false,
	})
	.done(function( jsonData ) {


		//=================================================================
		// START - Update the table without doing a server reload
		// Only update
		//=================================================================
		if ( mode == '*update' ) {

			event.preventDefault();

			// Get some input data from the modal window
			var modal_input_INPTXT 	= $('#modal-input-INPTXT').val();

			// Debug
			// console.log(myGlobalRowData[0]);
			// console.log(myGlobalRowData[1]);
			// console.log(myGlobalRowData[2]);
			// console.log(myCurrentRow);
			// console.table(myGlobalTableData);

			// Get the data for the "Change/Delete button", so we do not need to create it again
			// myChangeButtonData = myGlobalRowData[6];
			// myDeleteButtonData = myGlobalRowData[7];

			//==============================================
			// Use this if you want to update the whole row
			//==============================================
			// myGlobalTableData.row(myCurrentRow).data([
														// modal_input_WEBNAM,
														// modal_input_LSTCAL,
														// modal_input_DESCP1,
														// modal_input_DESCP2,
														// modal_input_COUNT,
														// modal_input_SERTYP,
														// myChangeButtonData,
														// myDeleteButtonData,
														// modal_input_DESCP1,
														// modal_input_DESCP2
													// ])
													// .draw(false)
													// ;

			//=======================================================
			// Use this if you want to update one or more table cells
			//=======================================================
			thisGlobalTableData.cell(thisCurrentRow, 4).data( modal_input_INPTXT )
			//.draw(false);

		}
		//=================================================================
		// END - Update the table without doing a server reload
		//=================================================================

		//=================================================================
		// Close the modal
		//=================================================================
		$('#webtrn_MaintainModal').modal('hide');

		//=================================================================
		// Only when add
		//=================================================================
		if ( mode == '*add' ) {
			getDataPrompter('','0','');
		}


	})
	.always(function( jsonData ) {


		// Reset mode
		$('#input-mode').val('');

	})
	.fail(function( xhr, ajaxOptions, thrownError ) {
		console.log('I am failed..');
		console.log( thrownError );
		console.log( xhr );

	});

}

//=============================================================================
// Delete confirm
//=============================================================================
function dataDeleteConfirm( )
{

	$('#input-mode').val('*delete');

	var row = thisGlobalRowData;

	var input_HUB_TIMSTP = row["HUB_TIMSTP"];

	$('#confirm-delete-HUB_HUB_TIMSTP').val(input_HUB_TIMSTP);

	// Create confirm text
	$('#confirm-delete-text-HUB_TIMSTP').html(input_HUB_TIMSTP);

	$('#config_confirmDeleteModal').modal('show');

}


//=============================================================================
// Delete
//=============================================================================
function dataDeleteExec()
{
	// Reset modal message
	resetModalMessage();

	var mode = $('#input-mode').val();


	// Make array and json
	var myData = $('#dataForm-delete').find('input, select').serializeArray();
	var result = JSON.stringify(myData);

	//we don't use delete for now so return here...
	// console.log(result);
	 console.log(myData);
	return;

	var parmData = 'data=' + result
				 + '&mode=' + mode
				 ;

	$.ajax({
		url: "hub_config_maintain_save.php",
		type: "POST",
		data: parmData,
		dataType: "json",
		cache: false,
	})
	.done(function( jsonData ) {


		$('#config_confirmDeleteModal').modal('hide');
		getData('');

	})
	.always(function( jsonData ) {

	})
	.fail(function( xhr, ajaxOptions, thrownError ) {
		console.log('I am failed..');
		console.log( xhr );

	});

}



//=============================================================================
// Show deleted
//=============================================================================
function showDeleted()
{

	var show_deleted = $('#input-show-deleted').val();


	if ( show_deleted == 'Y' ) {
		$('#button-show-deleted').html('<?php echo $datahub_NO ?>');
		$('#input-show-deleted').val('N');
	} else {
		$('#button-show-deleted').html('<?php echo $datahub_YES ?>');
		$('#input-show-deleted').val('Y');
	}

	getData('');

}

//=============================================================================
// Log off
//=============================================================================
function signoff()
{

	window.location.href = "logout.php";

}

//=============================================================================
// Load page
//=============================================================================
function loadPage(url, p1, p2, p3)
{

	window.location.href = url;

}

//=============================================================================
// Reset modal message
//=============================================================================
function resetModalMessage() {

	// Reset
	//$('#modal-message').removeClass('p-2 font-weight-bold border border-danger rounded bg-light').html( '&nbsp;' );

	$('#modal-message').removeClass('border-bottom').html( '&nbsp;' );
	$('#modal-save-button').removeClass('disabled').prop("disabled", false);

}

//=============================================================================
// Clean input string
//=============================================================================
function cleanInputString( myWorkField )
{

	let charactersToRemove = '?#"\'';
	let myPattern = new RegExp('[' + charactersToRemove + ']', 'g');

	myWorkField = myWorkField.replace(myPattern,'');

	return myWorkField;

}

//=============================================================================
// Full screen popup
//=============================================================================
function popUpFull( url, p1, p2, p3 )
{

	var winname = 'win_' + url;

	params  = 'width='+screen.width;
	params += ', height='+screen.height;
	params += ', top=0, left=0'
	params += ', fullscreen=yes';
	params += ',scrollbars=1';

	overview_win = window.open(url,winname, params);
	if (window.focus) {overview_win.focus()}
	return false;

}

//=============================================================================
// screen popup - center
//=============================================================================
function popUpCenter(url, p1, p2, p3)
{

	var v1_w  = screen.availWidth;
	var v1_h  = screen.availHeight;

	if ( parseInt(v1_w) > 1800 ) {
		v1_w = 1800;
		v1_h = v1_h - 200;
		v1_center = v1_w/0.8;
	}

	// Center popup as good as possible
	var left = (screen.width - v1_w) / 2;
	var top = (screen.height - v1_h) / 4;

	var winname = 'win_' + url;

	params  = 'width='+v1_w;
	params += ', height='+v1_h;
	params += ', top=' + top + ', left=' + left;
	params += ', fullscreen=yes';
	params += ',scrollbars=1';

	overview_win = window.open(url,winname, params);
	if (window.focus) {overview_win.focus()}
	return false;

}

//=============================================================================
// screen popup - center - bigger
//=============================================================================
function popUpCenterBig(url, p1, p2, p3, win_type)
{

	var v1_w  = screen.availWidth;
	var v1_h  = screen.availHeight;

	// Get 25%
	v1_w_pct = v1_w * 0.25;

	v1_w_new = v1_w - v1_w_pct;


	if ( v1_w_new < 1 ) {
		v1_w_new	= 1800;
	}

	v1_w = v1_w_new;
	v1_h = v1_h - 200;
	v1_center = v1_w/0.8;

	// Center popup as good as possible
	var left = (screen.width - v1_w) / 2;
	var top = (screen.height - v1_h) / 4;

	var winname = 'win_' + url;

	var url = url + '?hub_webnam=' + p1;

	params  = 'width='+v1_w;
	params += ', height='+v1_h;
	params += ', top=' + top + ', left=' + left;
	params += ', fullscreen=yes';
	params += ',scrollbars=1';

	// Set type of window
	if ( win_type == 'new-tab' ) {
		overview_win = window.open(url,winname);
	} else {
		overview_win = window.open(url,winname, params);
	}

	if (window.focus) {overview_win.focus()}
	return false;

}

//=============================================================================
// Popup top
//=============================================================================
function popUpTop(url, p1, p2, p3)
{

	var winname = 'win_' + url;

	w = 650;
	h = 750;

	params  = 'width='+w;
	params += ', height='+h;
	params += ', top=0, left=0'
	params += ', fullscreen=no';
	params += ',scrollbars=1';

	overview_win = window.open(url,winname, params);
	if (window.focus) {overview_win.focus()}
	return false;
}


//=============================================================================
// Format prodid
//=============================================================================
function formatPRODID( input_PRODID )
{

    // Ensure the input is a string
    let str = input_PRODID.toString();

    // Insert hyphens at specific positions
    let formattedStr = str.slice(0, 5) + '-' + str.slice(5, 15) + '-' + str.slice(15);

    return formattedStr;

}

//=============================================================================
// Get data - search
//=============================================================================
function setWebserviceSearch( input_WEBNAM )
{

	// Save curreent webservice name
	$('#input-webnam').val( input_WEBNAM );

	var selectButtonLineID 		= 'select-button-line-id-' + input_WEBNAM;

	// Set clicked button
	$('.select-button-line').removeClass('btn-success').addClass('btn-dark');
	$('#' + selectButtonLineID).removeClass('btn-dark').addClass('btn-success');

	// Search - destory table and start over again
	 $('#REEFTvisual_data').DataTable().clear().destroy();
	setDataTables();

}

//=============================================================================
// Set months
//=============================================================================
function setDefaultMonths() {

		$('#default-month-buttons').html('');

		var monthButtons = '';


		var defaultMonth = moment().subtract(6, 'month').format("MM");
		var monthName = setDefaultMonthName( defaultMonth );
		createDefaultMonthButton(6, defaultMonth, monthName);

		var defaultMonth = moment().subtract(5, 'month').format("MM");
		var monthName = setDefaultMonthName( defaultMonth );
		createDefaultMonthButton(5, defaultMonth, monthName);

		var defaultMonth = moment().subtract(4, 'month').format("MM");
		var monthName = setDefaultMonthName( defaultMonth );
		createDefaultMonthButton(4, defaultMonth, monthName);

		var defaultMonth = moment().subtract(3, 'month').format("MM");
		var monthName = setDefaultMonthName( defaultMonth );
		createDefaultMonthButton(3, defaultMonth, monthName);

		var defaultMonth = moment().subtract(2, 'month').format("MM");
		var monthName = setDefaultMonthName( defaultMonth );
		createDefaultMonthButton(2, defaultMonth, monthName);

		var defaultMonth = moment().subtract(1, 'month').format("MM");
		var monthName = setDefaultMonthName( defaultMonth );
		createDefaultMonthButton(1, defaultMonth, monthName);


		var defaultMonth = moment().subtract(0, 'month').format("MM");
		var monthName = setDefaultMonthName( defaultMonth );
		createDefaultMonthButton(0, defaultMonth, monthName);

}

//=============================================================================
// Create button
//=============================================================================
function createDefaultMonthButton( number, month, monthName )
{

		var thisId = 'default-button-' + month;

		var monthButton = '<button type="button" class="btn-default-date-interval btn btn-dark mr-1 mb-1" id="' + thisId + '" onclick="setDefaultFromToDateCalc(\'' + number + '\',\'' + month + '\')">' + monthName + '</button>'


		$('#default-month-buttons').append(monthButton);

}

//=============================================================================
// Set month names
//=============================================================================
function setDefaultMonthName( month ) {


	var monthName = '';

	if ( month == '01') {
		monthName = '<?php echo $datahub_month_01 ?>';
	}
	else if ( month == '02') {
		monthName = '<?php echo $datahub_month_02 ?>';
	}
	else if ( month == '03') {
		monthName = '<?php echo $datahub_month_03 ?>';
	}
	else if ( month == '04') {
		monthName = '<?php echo $datahub_month_04 ?>';
	}
	else if ( month == '05') {
		monthName = '<?php echo $datahub_month_05 ?>';
	}
	else if ( month == '06') {
		monthName = '<?php echo $datahub_month_06 ?>';
	}
	else if ( month == '07') {
		monthName = '<?php echo $datahub_month_07 ?>';
	}
	else if ( month == '08') {
		monthName = '<?php echo $datahub_month_08 ?>';
	}
	else if ( month == '09') {
		monthName = '<?php echo $datahub_month_09 ?>';
	}
	else if ( month == '10') {
		monthName = '<?php echo $datahub_month_10 ?>';
	}
	else if ( month == '11') {
		monthName = '<?php echo $datahub_month_11 ?>';
	}
	else if ( month == '12') {
		monthName = '<?php echo $datahub_month_12 ?>';
	}
	else {
		monthName = 'Unknown: ' + month;
	}

	return monthName;

}

//=============================================================================
// Set default from 7 to date
//=============================================================================
function setDefaultFromToDateCalc( sub_month, month )
{

		// Calcualte date intervals
		var defaultFromDate	= moment().subtract( parseInt(sub_month), 'month').format("YYYY-MM-01" );
		var defaultToDate	= moment().add(1, 'day').format("YYYY-MM-DD");
		var defaultToDate   = moment().subtract( parseInt(sub_month), 'month').endOf('month').format('YYYY-MM-DD');

		// Move to input fields
		$('#input-fromdate').val( defaultFromDate );
		$('#input-todate').val( defaultToDate );

		$('#input-fromtime').val( '00:01' );
		$('#input-totime').val( '23:59' );


		var thisId = 'default-button-' +  month;


		$('.btn-default-date-interval').removeClass('btn-success').addClass('btn-dark');
		$('#' + thisId).removeClass('btn-dark').addClass('btn-success');

		// Click get button
		//$('#button-call-import-log-overview').trigger('click');
		$('#updateButton').trigger('click');


}

//=============================================================================
// Show chart
//=============================================================================
function showChart()
{

	var url 	 = 'hub_webtrn_chart.php';
	var p1  	 = GLOBAL_HUB_NAM;
	var p2  	 = '';
	var p3  	 = '';
	var win_type = 'new-tab';

	popUpCenterBig(url, p1, p2, p3, win_type);

}

//=============================================================================
// Set clock
//=============================================================================
function updateClock() {

	var currentTime = moment().format('YYYY-MM-DD HH:mm:ss');
	currentTime = REEFT_format_date( currentTime, DFT_DATE_DISPLAY_FORMAT )

	$('#current-time').html( currentTime );

}

//=============================================================================
// jQuery - Ready
//=============================================================================
$(document).ready(function()
{

	// Do not show deleted
	$('#input-show-deleted').val('Y');
	$('#input-webnam').val('<?php echo $hub_webnam ?>');
	$('#hub-webnam-text').html('<?php echo $hub_webnam ?>');


	// Get data done by datatables
	setDataTables();

	// Place cursor
	$('#input-fromdate').trigger('focus');

	$('#delay-marker-id').html('<i id="delay-marker-icon-id" class="text-success fa-solid fa-circle"></i>');

	//-----------------------------------------------------------------------
	// Start the clock
	//-----------------------------------------------------------------------
		updateClock();
		setInterval(function() {
			updateClock();
		}, 1000);
	//-----------------------------------------------------------------------

	//-----------------------------------------------------------------------
	// Set default from/to date
	//-----------------------------------------------------------------------
		//setDefaultFromToDate('2');
		setDefaultMonths();
	//-----------------------------------------------------------------------


	//-----------------------------------------------------------------------
	// Set font awesome icon type
	//-----------------------------------------------------------------------
	// Value is from config/config.php
	var iconType = '<?php echo $DFT_SET_FONT_AWESOME_ICON_TYPE ?>';
	setFontAwesomeIconType( iconType );
	//-----------------------------------------------------------------------

	//-----------------------------------------------------------------------
	// Delay keyup checker
	//-----------------------------------------------------------------------
	var delay = (function () {
		var timer = 0;
		return function (callback, ms) {
			clearTimeout(timer);
			timer = setTimeout(callback, ms);
		};
	})()


	// DataTable search delay
	$('#REEFTvisual_data_wrapper .dataTables_filter input')
    .unbind() // overrule normal behavior
    .bind('keyup', function(e){

		$('#delay-marker-icon-id').removeClass('text-success').addClass('text-danger');

		var inputValue = $('.dataTables_filter input').val();
		var currSearchValue = $('#input-search-line').val();
		if (inputValue != currSearchValue) {
			$('#input-search-line').val( inputValue );
			//If enter or delete we update immediately, consider to add backspace=8 and delete=46 also
			const keyList = [13];
			if (keyList.includes(e.keyCode)) {
				// console.log('immediately ' + inputValue );
				$('#delay-marker-icon-id').removeClass('text-danger').addClass('text-success');
				thisGlobalTableData.search(inputValue).draw(); // fire in the hole
			} else {
				delay(function () {
					// console.log('this will hit, once user has not typed for 1 second ' + inputValue );
					$('#delay-marker-icon-id').removeClass('text-danger').addClass('text-success');
					thisGlobalTableData.search(inputValue).draw(); // fire in the hole
				}, 0800);
			}
		}
	});

	//-----------------------------------------------------------------------
	// Event listener for the update button
	//-----------------------------------------------------------------------
    $('#updateButton').on('click', function() {


        // Update input variables
		input_fromdate = $('#input-fromdate').val();
		input_fromtime = $('#input-fromtime').val();
		input_todate = $('#input-todate').val();
		input_totime = $('#input-totime').val();

        // Trigger a redraw of the table
        thisGlobalTableData.draw();
    });


	//-----------------------------------------------------------------------
	// Set short cuts
	//-----------------------------------------------------------------------

	// If add d-none class, do not add shortcut
	if ( GLOBAL_ADD_ALLOWED == 'Y' ) {
		shortcut.add("Alt+F6",function() {
			$('#add-button').click();
		});

		// Show add button
		$('#add-button').removeClass('d-none');
	}


	// Close window
	shortcut.add("Shift+Esc",function() {
		$('#button-close').click();
	});




});
// -->
</script>

</head>

<body>

<div class="container-fluid mt-2 pl-3 pr-3">

		<input type="text" class="d-none" id="input-webnam">

		<input type="text" class="d-none" id="input_search">

		<input type="text" class="d-none" id="input-mode" >
		<input type="text" class="d-none" id="input-show-deleted" >
		<input type="text" class="d-none" id="input-search-line">
		<input type="text" class="d-none" id="input-filter-line">

		<input type="text" class="d-none" id="input-rpyOffSet">
		<input type="text" class="d-none" id="input-rpyTotalRecordsFound">
		<input type="text" class="d-none" id="input-rpyTotalPages">
		<input type="text" class="d-none" id="input-rpyPageSize">

		<div class="row">
			<div class="col-2">
				<img src="images/customer-logo.png" alt="Customer Logo">
			</div>
			<div class="col-8 text-center <?php echo $DFT_CLOCK_SIZE ?>">
				<i class="font-awesome-pseudo-class fa-thin fa-clock"></i>&nbsp;&nbsp;<span id="current-time"><?php echo date('d-m-Y h:i:s') ?></span>
			</div>
			<div class="col-2 text-right">

				<div class="btn btn-primary mb-1" id="button-close" onclick="window.close()" title="Shift+F1 = Close window"><i class="font-awesome-pseudo-class fa-2x fa-thin fa-home"></i></div>

				<div class="d-none">
					<div class="btn btn-primary mb-1" onclick="loadPage('menu_admin.php','','','')" title="<?php echo $datahub_go_to_my_dear_home ?>"><i class="font-awesome-pseudo-class fa-2x fa-thin fa-home"></i></div>
					<div class="btn btn-primary mb-1 d-none d-xl-inline-block" onclick="loadPage('menu_main.php','','','')" title="<?php echo $datahub_go_to_my_dear_home_03 ?>"><i class="font-awesome-pseudo-class fa-2x fa-thin fa-fort"></i></div>
					<div class="btn btn-danger mb-1 d-none d-lg-inline-block"  onclick="signoff()" title="<?php echo $datahub_go_to_my_dear_home_02 ?>"><i class="font-awesome-pseudo-class fa-thin  fa-2x fa-right-from-bracket"></i></div>
				</div>

			</div>
		</div>

		<div class="row">
			<div class="col-12 text-center">
				<div id="data-hub-company-information"></div>
			</div>
		</div>


		<div class="card mt-2">
			<div class="card-header text-muted">
				<div class="row mt-2">
					<div class="col-4 h4">
						<i class="font-awesome-pseudo-class fa-thin fa-anchor"></i> <?php echo "$datahub_text0126"; ?>
					</div>


					<div class="col text-center font-weight-bold">
						<div id="hub-webnam-text" class="h5 font-weight-bold"></div>


						<span title="Show as chart" onclick="showChart()" style="cursor: pointer;"><i class="fa-duotone fa-2x fa-solid fa-chart-mixed" style="--fa-primary-color: orange; --fa-secondary-color: forestgreen; --fa-secondary-opacity: 0.7;"></i></span>
						<div onclick="showChart()" style="cursor: pointer;">Show chart</div>



					</div>

					<div class="col text-right font-weight-bold">

							<div class="row">
								<div class="col text-right">
									<?php echo $datahub_text0061 ?> : <span id="text-total-records-found">...</span>
								</div>
							</div>

							<div class="row">
								<div class="col text-right">
									<span id="delay-marker-id"></span>
								</div>
							</div>



					</div>
				</div>
			</div>

			<div class="card-body">

						<!-- Message if screen is not wide enough -->
				<div class="container-fluid mt-2 mb-4 d-block d-lg-none">
					<div id="general-message-top" class="border border-danger rounded p-2 text-danger font-weight-boldx"><?php echo $datahub_error0040a ?></div>
				</div>
			<!-- Message if screen is not wide enough -->

				<!-- Group lines found -->
				<div class="d-none d-lg-block">
					<div class="row mb-2">
						<div class="col-12">
							<div id="data-result-button-lines"></div>
						</div>
					</div>
				</div>


				<div class="row mb-1">
					<div class="col text-left">
						<div class="d-noneX" id="default-month-buttons"></div>
					</div>
					<div class="col text-right">
					</div>
				</div>



				<div class="row mb-3">
					<div class="col-xl-4 col-lg-4 col-md-6 col-sm-4 col-xs-4 mt-1">

						<div class="row">
							<div class="col">
								<small><?php echo $datahub_text0121 ?></small>
							</div>
						</div>
						<div class="row">
							<div class="col mb-1">
								<input id="input-fromdate" type="date" class="form-control">
							</div>
							<div class="col">
								<input id="input-fromtime" type="time" class="form-control">
							</div>
						</div>

					</div>

					<div class="col-xl-4 col-lg-4 col-md-6 col-sm-4 col-xs-4 mt-1">
						<div class="row">
							<div class="col">
								<small><?php echo $datahub_text0122 ?></small>
							</div>
						</div>
						<div class="row">
							<div class="col mb-1">
								<input id="input-todate" type="date" class="form-control">
							</div>
							<div class="col">
								<input id="input-totime" type="time" class="form-control">
							</div>
						</div>
					</div>

					<div class="col-xl-4 col-lg-4 col-md-6 col-sm-4 col-xs-4 mt-1">
						<div class="row">
							<div class="col">
								<small>&nbsp;</small>
							</div>
						</div>
						<div class="row">
							<div class="col">
								<button type="button" class="btn btn-primary  mb-1" id="updateButton"><?php echo $datahub_button_get_data_icon2 ?></button>
								<button type="button" class="btn btn-primary  mb-1" onclick="getData('*RESET')"><?php echo $datahub_button_order_reset01_icon ?></button>
							</div>
						</div>
					</div>

				</div>

				<div class="row mt-2">
					<div class="col">
						<div id="data-result" style="width: 100%;"></div>
							<table id="REEFTvisual_data" class="table nowrap table-bordered table-striped table-hover">
								<thead>
									<tr class="bg-primary text-white font-weight-bold text-center">
										<th class="text-left"><?php echo $datahub_text0140 ?></th>
										<th class="text-left"><?php echo $datahub_text0145 ?></th>
										<th class="text-left"><?php echo $datahub_text0141 ?></th>
										<th class="text-left"><?php echo $datahub_text0150 ?></th>
										<th class="text-left"><?php echo "$datahub_text0153 $datahub_text0154"; ?></th>
										<th class="text-left"><?php echo $datahub_text0127 ?></th>
										<th class="text-center"><button id="add-button" title="Shortcut: Alt+F6" onclick="dataAdd('0')" class="d-none btn btn-dark font-weight-bold"><?php echo $datahub_button_save_01 ?></button></th>
										<th class="text-left"></th>
										<th class="text-left"><?php echo $datahub_text0157 ?></th>
										<th class="text-left"><?php echo $datahub_text0151 ?></th>
										<th class="text-left"><?php echo $datahub_text0152 ?></th>
										<th class="text-left"><?php echo "$datahub_text0153 $datahub_text0156"; ?></th>
										<th class="text-left"><?php echo $datahub_text0155 ?></th>
										<th class="text-center"></th>
									</tr>
								</thead>
							</table>

					</div>
				</div>

				<div class="row">
					<div class="col text-right mb-2">
						<small><div id="load-time-from-database"></div></small>
					</div>
				</div>

			</div>

		</div>


</div>


<!-- Set footer -->
<?php
	include "include/footer.php";
?>
<!-- Set footer -->

<!-- ========================================================================== -->
<!--                                M O D A L S                                 -->
<!-- ========================================================================== -->

<!-- Modal -->
<div class="modal fade" id="webtrn_MaintainModal" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="webtrn_MaintainModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xxl">
    <div class="modal-content">

      <div class="modal-header bg-primary text-white">

		<div class="container-fluid pl-0 pr-0">
		<div class="row">

			<div class="col-8">
				<h5 class="modal-title" id="webtrn_MaintainModalLabel"><i class="font-awesome-pseudo-class fa-thin fa-anchor"></i> <?php echo $datahub_text0126 ?></h5>
			</div>

			<div class="col text-right">

			</div>
			<div class="col-1 text-right" style="max-width:20px">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				  <span aria-hidden="true">&times;</span>
				</button>
			</div>

		</div>
		</div>


      </div>
      <div class="modal-body ml-2 mr-2">

  		<input type="text" class="d-none" id="input-current-color-picker">
		<input type="text" class="d-none" id="input-current-text-color">
		<input type="text" class="d-none" id="input-current-background-color">

			<!-- Message if screen is not wide enough -->
				<div class="container-fluid mt-2 mb-4 d-block d-lg-none">
					<div id="general-message-top" class="border border-danger rounded p-2 text-danger font-weight-boldx"><?php echo $datahub_error0040a ?></div>
				</div>
			<!-- Message if screen is not wide enough -->


			<form name="dataForm" id="dataForm">

			<!-- Hidden fields start -->
			<input type="text" class="d-none" id="modal-input-counter" name="modal-input-counter">
			<!-- Hidden fields end -->

			<div class="row mt-2">
				<div class="col-7">
					<div id="data-result-button-lines-modal"></div>
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-2">
					<?php echo $datahub_text0140 ?>
				</div>
				<div class="col-4">
					<input class="form-control read-only-class" type="text" id="modal-input-WEBNAM" name="modal-input-WEBNAM">
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-2">
					<?php echo $datahub_text0145 ?>
				</div>
				<div class="col-4">
					<input class="form-control read-only-class" type="text" id="modal-input-TIMSTP" name="modal-input-TIMSTP">
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-2">
					<?php echo $datahub_text0133 ?>
				</div>
				<div class="col-3">
					<input class="form-control read-only-class" type="text" id="modal-input-PACKNO" name="modal-input-PACKNO">
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-2">
					<?php echo $datahub_text0150 ?>
				</div>
				<div class="col-3">
					<input class="form-control read-only-class" type="text" id="modal-input-PRODID" name="modal-input-PRODID">
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-2">
					<?php echo $datahub_text0151 ?>
				</div>
				<div class="col-3">
					<input class="form-control read-only-class" type="text" id="modal-input-STRCAL" name="modal-input-STRCAL">
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-2">
					<?php echo $datahub_text0152 ?>
				</div>
				<div class="col-3">
					<input class="form-control read-only-class" type="text" id="modal-input-ENDCAL" name="modal-input-ENDCAL">
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-2">
					<?php echo "$datahub_text0153 $datahub_text0154 / $datahub_text0156"; ?>
				</div>
				<div class="col-2">
					<input class="form-control read-only-class" type="text" id="modal-input-SECOND" name="modal-input-SECOND">
				</div>
				<div class="col-2">
					<input class="form-control read-only-class" type="text" id="modal-input-MSECND" name="modal-input-MSECND">
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-2">
					<?php echo $datahub_text0127 ?>
				</div>
				<div class="col-6">
					 <textarea class="form-control read-only-class" id="modal-input-INPTXT" name="modal-input-INPTXT" rows="4" ></textarea>
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-2">
					<?php echo $datahub_text0155 ?>
				</div>
				<div class="col-1">
					<input class="form-control read-only-class" type="text" id="modal-input-RPYCOD" name="modal-input-RPYCOD">
				</div>
				<div class="col-6">
					<input class="form-control read-only-class" type="text" id="modal-input-RPYTXT" name="modal-input-RPYTXT">
				</div>
			</div>

			<div class="row mt-2">
				<div class="col-2">
					<?php echo $datahub_text0235 ?>
				</div>
				<div class="col-8">
					<input class="form-control read-only-class" type="text" id="modal-input-IFSFIL" name="modal-input-IFSFIL">
				</div>
			</div>

			</form>

      </div>
      <div class="modal-footer-pretty modal-footer">

			<div class="container-fluid">

				<div class="row">
					<div class="col-12 text-left">
						<div class="p-1 font-weight-bold text-danger border-top border-dark " id="modal-message">&nbsp;</div>
					</div>
				</div>

				<div class="row mt-1 mb-2">
					<div class="col-3 text-left">
						<button type="button" id="modal-save-button" class="d-none btn btn-primary btn-block" onclick="dataSave()"><?php echo $datahub_button_save ?></button>
					</div>
					<div class="col-6 text-right">
					</div>
					<div class="col-3 text-right">
						<button type="button" class="btn btn-primary btn-block" data-dismiss="modal"><?php echo $datahub_button_cancel_01 ?></button>
					</div>
				</div>

			</div>


      </div>
    </div>
  </div>
</div>

<!-- ************************************************ -->
<!--                 Confirm delete                   -->
<!-- ************************************************ -->
<div class="modal fade" id="config_confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="config_confirmDeleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title" id="config_confirmDeleteModalLabel"><?php echo $datahub_text0063 ?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

		<form name="dataForm-delete" id="dataForm-delete">

			<input type="text" class="d-none" id="confirm-delete-HUB_HUB_TIMSTP" name="confirm-delete-HUB_HUB_TIMSTP">

		</form>

		<div class="h6"><?php echo $datahub_text0062 ?>: <span class="font-weight-bold" id="confirm-delete-text-HUB_TIMSTP"></span></div>

      </div>
      <div class="modal-footer">

			<div class="container-fluid">

				<div class="row mt-1 mb-2">
					<div class="col-3 text-left">
						<button type="button" onclick="dataDeleteExec()" class="btn btn-primary">Delete</button>
					</div>
					<div class="col-6 text-right">
					</div>
					<div class="col-3 text-right">
						<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
					</div>
				</div>


			</div>
      </div>
    </div>
  </div>
</div>


</body>
</html>